<template>
    <el-dialog title="安排详情" :visible.sync="showDialog_" custom-class='dialog_right MkRecordDetail dialogScroll_detail' top="0%" @close='closeDialog()' @open='openDialog'>
      <div class="operationBtnInRightDialog">
        <!--<span class='editInfoIcon' @click="" ><i class="el-icon-edit"></i> 编辑</span>-->
        <mk-permission :perms="['Ticket:LineManagement:Schedule:delete']">
          <span class='infoIcon' @click="deleteArrangementRecord" ><i class="el-icon-delete"></i> 删除</span>
        </mk-permission>
      </div>
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">
        <div class="contentDiv">
      <div class="headDiv">
        <div class="big">
          <span>{{detailObj.startSiteName}}</span>
          <ticket-arrow></ticket-arrow>
          <span>{{detailObj.endSiteName}}</span>
        </div>
        <div class="small">途经：{{detailObj.midwaySiteName}}</div>
        <div class="small">{{currentSendTime}} 发车</div>
      </div>
      <el-row :gutter="20">
        <el-col :span = "4" class="textAlignRight">总票数</el-col>
        <el-col :span = "20">{{detailObj.totalTicket}}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span = "4" class="textAlignRight">剩余票数</el-col>
        <el-col :span = "20">{{detailObj.remainTicket}}</el-col>
      </el-row>
        </div>
      </el-scrollbar>
    </el-dialog>
</template>

<script>
import routeService from '../../../services/route'
import ticketArrow from '../../../components/ticketArrow.vue'
import MkPermission from "../../../components/MkPermission";
import { mapState } from 'vuex'
export default {
  name: 'MkRecordDetail',
  components: {
    ticketArrow,MkPermission
  },
  props: ['showDialog','currentRecordId','currentSendTime'],
  computed: mapState({
    bodyHeight: state => state.global.bodyHeight,
  }),
  methods: {
    deleteArrangementRecord() {
      this.$confirm('此操作将删除该安排, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'confirmBox_warning'
      }).then(() => {
        console.log(this.currentRecordId +'---')
        routeService.deleteArrangementRecord({id:this.currentRecordId}, data => {
          this.$message.success('删除成功');
          this.isRefresh = 'yes';
          this.showDialog_ = false;
        })
      }).catch(()=>{

      });
    },
    closeDialog() {
      this.$emit('closeDialog',this.isRefresh);
    },
    openDialog() {
      this.isRefresh = 'no';
      routeService.loadArrangementRecordDetail({id:this.currentRecordId},data => {
        this.detailObj = data.data;
      })
    },
  },
  watch: {
    showDialog: function(value) {
      this.showDialog_ = value;
    }
  },
  data () {
    return {
      detailObj: {},
      isRefresh: 'no',
      showDialog_: this.showDialog,
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
 @import '../../../assets/style/main.less';
  .MkRecordDetail{
    .headDiv{
      background:#f9fafa;
      padding:30px;
      position:relative;
      margin-bottom:10px;
      .big{
        span{
          font-size:24px;
          line-height: 24px;
          color:@fontColorOne;
        }
        margin-bottom:10px;
      }
      .small{
        font-size:14px;
        line-height: 30px;
        color:@fontColorTwo;
      }
    }
    .el-row{
      line-height: 40px;
    }
  }
</style>
